<template>
	<!-- 根元素 -->
	<div class="lo_si">
		<!-- 主要容器 -->
		<div class="wrap">
			<!-- 内容盒子，包含介绍部分和表单部分 -->
			<div class="wrap-box">
				<!-- 介绍内容区域 (左右切换提示) -->
				<div class="box-content">
					<!-- 注册提示 -->
					<div class="intro-register">
						<h2 class="title">没有账号吗？</h2>
						<p class="desc">点击这里注册一个账号</p>
						<button type="button" class="get-register btn-intro" @click="showRegister">注册</button>
					</div>
					<!-- 登录提示 -->
					<div class="intro-login">
						<h2 class="title">已经有账号了吗？</h2>
						<p class="desc">点击这里登录</p>
						<button type="button" class="get-login btn-intro" @click="showLogin">登录</button>
					</div>
				</div>

				<!-- 表单管理盒子 (实现翻转效果) -->
				<!-- 根据 activeForm 的值动态添加 'left' 或 'right' 类实现移动动画 -->
				<!-- 根据 activeForm 的值动态添加 'active' 类实现翻转动画 -->
				<div class="manager-box"
					:class="{ 'right': activeForm === 'login', 'left': activeForm === 'register', 'active': activeForm === 'login' }">

					<!-- 注册表单部分 -->
					<div class="sign-part form-part">
						<div>
							<h3>注册</h3>
							<div class="input-box">
								<input type="text" placeholder="用户名" v-model="registerUsername">
								<i class="iconfont icon-wo"></i> <!-- 假设你有对应的 iconfont 类 -->
							</div>
							<div class="input-box">
								<input type="password" placeholder="密码" v-model="registerPassword">
								<i class="iconfont icon-mima"></i>
							</div>
							<div class="input-box">
								<input type="email" placeholder="邮箱" v-model="registerEmail">
								<i class="iconfont icon-youxiang"></i> <!-- 建议使用邮箱图标 -->
							</div>
							<!-- 注册验证码输入框 -->
							<div class="input-box codebox">
								<input type="text" :placeholder="signPlaceholderText" v-model="registerCode">
								<i class="iconfont icon-yanzhengma"></i> <!-- 建议使用验证码图标 -->
								<button class="cobutton" :disabled="isSignCodeButtonDisabled" @click="sendsigncode()">
									{{ signButtonText }}
								</button>
							</div>
							<div class="buttons">
								<button type="button" class="btn-submit btn-register" @click="register">注册</button>
							</div>
						</div>
					</div>

					<!-- 登录表单部分 -->
					<div class="login-part form-part">
						<div>
							<h3>邮箱密码登录</h3>
							<div class="input-box">
								<input type="email" placeholder="邮箱" v-model="loginEmail">
								<i class="iconfont icon-youxiang"></i>
							</div>
							<div class="input-box">
								<input type="password" placeholder="密码" v-model="loginPassword">
								<i class="iconfont icon-mima"></i>
							</div>
							<div class="buttons">
								<a href="javascript:;" @click="switchToEmailLogin"></a>
								<button type="button" class="btn-submit btn-login" @click="login">登录</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 加载动画 -->
		<div class="loading" v-show="isLoading">
			<!-- 这里可以放一个更现代的加载动画组件或纯 CSS 动画 -->
			<div class="loading-spinner"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onUnmounted
	} from 'vue';
	import axios from 'axios'; // 如果需要发送请求，取消注释
	import {
		useRouter
	} from 'vue-router';
	
	const router = useRouter();

	// --- 响应式状态定义 ---

	// 控制当前激活的表单 ('login' 或 'register')
	const activeForm = ref('login'); // 默认显示登录表单，'login' 对应 active 类
	// 控制加载状态显示
	const isLoading = ref(false);

	// --- 注册表单相关状态 ---
	const registerUsername = ref('');
	const registerPassword = ref('');
	const registerEmail = ref('');
	const registerCode = ref('');
	const signPlaceholderText = ref("验证码");
	const signButtonText = ref("获取验证码");
	const isSignCodeButtonDisabled = ref(false);
	const signCountdown = ref(0); // 注册验证码倒计时
	const signIntervalId = ref(null); // 注册验证码定时器ID

	// --- 登录表单相关状态 ---
	const loginPassword = ref('');
	const loginEmail = ref('');
	const loginCode = ref('');
	const loginPlaceholderText = ref("验证码");
	const loginButtonText = ref("获取验证码");
	const isLoginCodeButtonDisabled = ref(false);
	const loginCountdown = ref(0); // 登录验证码倒计时
	const loginIntervalId = ref(null); // 登录验证码定时器ID

	// --- 方法定义 ---

	/**
	 * 显示注册表单，触发向左移动和翻转动画
	 */
	const showRegister = () => {
		activeForm.value = 'register';
	};

	/**
	 * 显示登录表单，触发向右移动和翻转动画
	 */
	const showLogin = () => {
		activeForm.value = 'login';
	};

	/**
	 * 切换到邮箱登录模式
	 */
	const switchToEmailLogin = () => {
		isAccountLogin.value = false;
	};

	/**
	 * 切换到账号密码登录模式
	 */
	const switchToAccountLogin = () => {
		isAccountLogin.value = true;
	};

	/**
	 * 启动验证码倒计时 (通用函数)
	 * @param {Ref<string>} buttonTextRef - 控制按钮文本的 ref
	 * @param {Ref<boolean>} isDisabledRef - 控制按钮禁用状态的 ref
	 * @param {Ref<number>} countdownRef - 控制倒计时的 ref
	 * @param {Ref<number|null>} intervalIdRef - 存储定时器 ID 的 ref
	 */
	const startCountdown = (buttonTextRef, isDisabledRef, countdownRef, intervalIdRef) => {
		const initialCountdown = 60; // 设置倒计时秒数
		countdownRef.value = initialCountdown;
		isDisabledRef.value = true; // 禁用按钮
		buttonTextRef.value = `${countdownRef.value}秒后重试`;

		// 清除可能存在的旧定时器
		if (intervalIdRef.value) {
			clearInterval(intervalIdRef.value);
		}

		intervalIdRef.value = setInterval(() => {
			countdownRef.value--;
			if (countdownRef.value > 0) {
				buttonTextRef.value = `${countdownRef.value}秒后重试`;
			} else {
				clearInterval(intervalIdRef.value); // 清除定时器
				intervalIdRef.value = null;
				buttonTextRef.value = "获取验证码"; // 重置按钮文本
				isDisabledRef.value = false; // 启用按钮
			}
		}, 1000);
	};

	/**
	 * 发送注册验证码 (调用倒计时)
	 * 注意：实际发送验证码的 API 调用逻辑已省略
	 */
	function sendsigncode() {
		if (registerEmail.value == "") {
			alert("邮箱没填");
			return;
		}
		const res = axios.post("/api/user/sendcode", null, {
			params: {
				email: registerEmail.value
			}
		}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		res
			.then(response => {
				// 请求成功，处理响应数据

				// 这里可以根据具体业务需求判断 response.data 的内容
				// 假设返回的数据中有一个 success 字段表示是否成功
				console.log(response.data);
				if (response.data.code == 200) {
					startCountdown(signButtonText, isSignCodeButtonDisabled, signCountdown, signIntervalId);
				} else {
					console.log('发送验证码失败:', response.data.message);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
		// --- API 调用结束 ---
	};

	function register() {
		if (registerEmail.value == "" || registerUsername.value == "" ||
			registerPassword == "" || registerCode == "") {
			alert(" 信息没填");
			return;
		}
		const res = axios.post("/api/user/sign", {
			user: {
				username: registerUsername.value,
				password: registerPassword.value,
				email: registerEmail.value
			},
			code: registerCode.value
		}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});

		res
			.then(response => {
				// 请求成功，处理响应数据

				// 这里可以根据具体业务需求判断 response.data 的内容
				// 假设返回的数据中有一个 success 字段表示是否成功
				console.log(response.data);
				if (response.data.code == 200) {
					alert("注册成功");
				} else {
					console.log(' 注册失败:', response.data.message);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	};
	
	function login(){
		if (loginEmail.value == "" || loginPassword.value == "") {
			alert(" 信息没填");
			return;
		}
		const res = axios.post("/api/user/login", {
			user: {
				password: loginPassword.value,
				email: loginEmail.value
			}
		}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		
		res
			.then(response => {
				// 请求成功，处理响应数据
		
				// 这里可以根据具体业务需求判断 response.data 的内容
				// 假设返回的数据中有一个 success 字段表示是否成功
				console.log(response.data);
				if (response.data.code == 200) {
					console.log(response.data.msg);
					localStorage.setItem("user", JSON.stringify(response.data.data));
					sessionStorage.setItem("user", JSON.stringify(response.data.data));
					router.push('/');
				} else {
					alert(response.data.msg);
					// console.log(' 登录失败:', );
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	};

	// --- 生命周期钩子 ---

	// 组件卸载前执行清理操作
	onUnmounted(() => {
		console.log("组件卸载，清除定时器");
		// 清除所有可能存在的定时器
		if (signIntervalId.value) {
			clearInterval(signIntervalId.value);
		}
		if (loginIntervalId.value) {
			clearInterval(loginIntervalId.value);
		}
	});
</script>

<style lang="scss" scoped>
	// *** ADD THIS LINE TO IMPORT SASS COLOR MODULE ***
	@use "sass:color";

	// --- SCSS 变量定义 ---
	$primary-color: #f78c7b; // 主题色 (粉色)
	$secondary-color: #72e7f4; // 验证码按钮背景色 (蓝色)
	$text-color-light: #e8e8e8; // 亮色文字 (用于深色背景)
	$text-color-dark: #333; // 深色文字 (用于亮色背景)
	$text-color-muted: #999; // 提示性文字/链接颜色
	$text-color-placeholder: #ccc; // 输入框占位符颜色
	$input-border-color: #ddd; // 输入框边框颜色
	$background-dark-overlay: rgba(0, 0, 0, .6); // 深色半透明背景
	$background-light: #fff; // 亮色背景 (表单)
	$background-blur: rgba(255, 255, 255, 0.8); // 毛玻璃效果背景 (可选)
	$transition-speed-normal: 0.3s; // 普通过渡速度
	$transition-speed-flip: 0.8s; // 翻转过渡速度
	$transition-speed-move: 0.5s; // 移动过渡速度
	$box-shadow-light: 0 0 15px 4px rgba(0, 0, 0, .1); // 浅色阴影
	$box-shadow-dark: 0 0 10px 1px rgba(169, 169, 169, .2); // 深色阴影 (背景模糊时)
	$button-hover-color: #e27b75; // 提交按钮悬停颜色
	$border-radius: 3px; // 圆角大小

	// --- 基础重置和布局 ---
	* {
		margin: 0;
		padding: 0;
		border: none;
		box-sizing: border-box; // 统一盒模型
		// font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; // 设置基础字体 (可选)
	}

	// 输入框、按钮等去除默认轮廓
	textarea,
	input,
	button,
	a {
		outline: none;
	}

	button {
		cursor: pointer;
	}

	a {
		text-decoration: none;
	}

	img {
		border: 0;
		max-width: 100%;
		vertical-align: middle;
	}

	// 图片基础样式

	// 根容器样式
	.lo_si {
		width: 100%;
		min-height: 100vh; // 至少占满视口高度
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px; // 给页面边缘一些空间
		// background: url("你的背景图片URL") no-repeat center center fixed; // 设置背景图
		background-size: cover;
		background-color: #f0f2f5; // 添加一个备用背景色
	}

	// --- 主要容器和模糊背景 ---
	.wrap {
		position: relative; // 用于模糊效果的伪元素定位
		// height: 100%; // 如果想让 wrap 占满 lo_si，但通常不需要
		// filter: blur(3px); // 不建议直接在 wrap 上模糊，会影响内部元素

		// 使用伪元素实现背景模糊 (如果需要)
		/*
		&::after {
			content: "";
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background: inherit; // 继承父元素背景
			filter: blur(5px); // 模糊效果
			z-index: 1; // 在内容盒子之下
		}
		*/
	}

	// 内容盒子 (深色背景部分和表单部分的外层)
	.wrap-box {
		position: relative; // 相对于 .wrap 定位 (如果 wrap 有定位) 或视口
		width: 840px;
		height: 320px; // 介绍区域的高度
		background: $background-dark-overlay;
		z-index: 2; // 在模糊背景之上
		box-shadow: $box-shadow-dark;
		border-radius: $border-radius;
		// display: flex; // 使用 Flexbox 布局左右介绍区域
	}

	// 介绍内容区域 (包含左右提示)
	.box-content {
		display: flex; // 使用 Flexbox
		width: 100%;
		height: 100%;
		color: $text-color-light;

		// 左右提示区域通用样式
		.intro-register,
		.intro-login {
			flex: 1; // 各占一半宽度
			display: flex;
			flex-direction: column; // 垂直排列内容
			justify-content: center; // 垂直居中
			align-items: center; // 水平居中
			text-align: center;
			line-height: 1.6; // 增加行高
			padding: 0 20px; // 内部左右边距
		}

		.title {
			font-size: 22px;
			letter-spacing: 1px;
			margin-bottom: 10px;
			color: $text-color-light; // 确保颜色
		}

		.desc {
			font-size: 14px;
			color: $text-color-muted; // 使用变量
			margin-bottom: 15px;
		}

		// 介绍部分的按钮
		.btn-intro {
			border-radius: $border-radius;
			border: 1px solid $text-color-muted;
			background-color: transparent;
			color: $text-color-muted;
			width: 124px;
			height: 38px;
			font-size: 16px;
			transition: all $transition-speed-normal ease;

			&:hover {
				border-color: $text-color-light;
				color: $text-color-light;
				background-color: rgba(255, 255, 255, 0.1); // 轻微背景变化
			}
		}
	}

	// --- 表单管理盒子 (翻转效果) ---
	.manager-box {
		position: absolute;
		height: 420px; // 增加高度以容纳更多输入框
		width: 400px;
		left: 50px; // 初始位置 (注册侧)
		top: -50px; // 向上偏移，使其上下居中 wrap-box
		perspective: 1000px; // 增加透视效果

		// 移动动画
		&.right {
			// 登录状态，移动到右侧
			animation: toRight $transition-speed-move 1 forwards ease-out;
		}

		&.left {
			// 注册状态，回到左侧 (或从右侧移动)
			animation: toLeft $transition-speed-move 1 forwards ease-out;
		}

		// 翻转动画
		.form-part {
			// 注册和登录表单的通用容器
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: $background-light;
			border-radius: $border-radius;
			box-shadow: $box-shadow-light;
			padding: 30px 40px; // 内边距
			transform-style: preserve-3d; // 保持 3D 变换
			transition: transform $transition-speed-flip linear; // 翻转动画
			backface-visibility: hidden; // 隐藏背面
			display: flex; // 使用 flex 居中内部 div
			align-items: center; // 垂直居中
			justify-content: center; // 水平居中 (如果内部 div 宽度固定)

			&>div {
				// 表单内容的直接子 div
				width: 100%; // 确保子 div 宽度占满
			}
		}

		.sign-part {
			// 注册表单初始状态 (可见)
			z-index: 1;
			transform: rotateY(0deg);
		}

		.login-part {
			// 登录表单初始状态 (背面)
			z-index: 0;
			transform: rotateY(-180deg);
		}

		// 激活状态 (登录表单显示时)
		&.active {
			.sign-part {
				transform: rotateY(180deg); // 注册表单翻转到背面
			}

			.login-part {
				transform: rotateY(0deg); // 登录表单翻转到正面
			}
		}

		// 表单标题
		h3 {
			color: $primary-color;
			font-size: 22px;
			text-align: center; // 标题居中
			margin-bottom: 30px;
		}

		// 输入框容器
		.input-box {
			position: relative;
			margin-bottom: 25px; // 调整间距

			i {
				// 图标样式
				position: absolute;
				right: 10px; // 图标位置
				top: 50%; // 垂直居中
				transform: translateY(-50%);
				color: $text-color-placeholder; // 图标默认颜色
				transition: color $transition-speed-normal ease;
				font-size: 18px; // 图标大小
			}

			input {
				display: block;
				width: 100%;
				border: 0;
				border-bottom: 1px solid $input-border-color;
				line-height: 1.5; // 使用 line-height 控制高度感
				padding: 10px 0 10px 5px; // 调整内边距
				padding-right: 35px; // 给图标留出空间
				font-size: 16px;
				background-color: transparent; // 透明背景
				transition: border-color $transition-speed-normal ease;

				&::placeholder {
					color: $text-color-placeholder;
					font-size: 14px;
				}

				// 输入框获取焦点时的效果
				&:focus {
					border-color: $primary-color; // 边框变色

					&+i {
						// 旁边的图标变色
						color: $primary-color;
					}

					// 下划线动画 (可选，替代简单的 border-color 变化)
					/*
                    & ~ .underline { // 需要在 input 后添加 <span class="underline"></span>
                        width: 100%;
                    }
                    */
				}
			}

			// 可选的下划线动画元素
			/*
            .underline {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 2px;
                width: 0;
                background-color: $primary-color;
                transition: width $transition-speed-normal ease;
            }
            */
		}


		// 底部按钮和链接区域
		.buttons {
			margin-top: 30px; // 调整间距
			display: flex; // 使用 flex 布局
			justify-content: space-between; // 两端对齐
			align-items: center; // 垂直居中

			a {
				// "邮箱登录" / "账号密码登录" 链接
				color: $text-color-muted;
				font-size: 14px;
				transition: color $transition-speed-normal ease;

				&:hover {
					color: $primary-color;
				}
			}

			// 提交按钮 (登录/注册)
			.btn-submit {
				width: 124px;
				height: 38px;
				color: $background-light;
				background-color: $primary-color;
				border: 0;
				border-radius: $border-radius;
				font-size: 16px;
				transition: background-color $transition-speed-normal ease;
				position: relative; // 为了气泡动画
				overflow: hidden; // 隐藏溢出的气泡

				&:hover {
					background-color: $button-hover-color; // 普通悬停效果
					background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 53% 105% / 10px 10px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 16% 132% / 12px 12px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 56% 94% / 8px 8px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 42% 126% / 14px 14px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 11% 119% / 11px 11px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 69% 143% / 9px 9px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 107% 141% / 6px 6px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 51% 132% / 10px 10px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 20% 121% / 15px 15px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 68% 121% / 6px 6px,
						radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 22% 127% / 11px 11px;
					background-color: #e27b75;
					background-repeat: no-repeat;
					animation: bubbles .7s forwards ease-out;
				}

				// 气泡动画 (如果需要保留)
				/*
                &:hover {
                    background: radial-gradient(...) ...; // 原始气泡动画背景
                    background-color: $button-hover-color;
                    background-repeat: no-repeat;
                    animation: bubbles .7s forwards ease-out;
                }
                */
			}
		}
	}

	// --- 移动动画 Keyframes ---
	@keyframes toRight {
		0% {
			left: 50px;
		}

		66% {
			left: 450px;
		}

		// 中间停顿效果
		100% {
			left: 390px;
		}

		// 最终位置 (wrap-box宽度 - manager-box宽度 - 初始left) = 840 - 400 - 50 = 390
	}

	@keyframes toLeft {
		0% {
			left: 390px;
		}

		66% {
			left: -10px;
		}

		// 中间停顿效果
		100% {
			left: 50px;
		}

		// 最终位置
	}

	// --- 按钮气泡动画 Keyframes (可选保留) ---
	@keyframes bubbles {
		100% {
			background-position: 48% -266%, 17% -396%, 58% -137%, 33% -360%, 21% -368%, 77% -137%, 114% -391%, 43% -2%, -1% -41%, 60% -207%, 27% -149%;
			// *** CORRECTED darken() ***
			box-shadow: inset 0 -60px 0 color.adjust($button-hover-color, $lightness: -5%); // 阴影颜色调整
		}
	}

	// --- 加载动画 ---
	.loading {
		position: fixed; // 固定定位覆盖全屏
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.7); // 半透明背景
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999; // 最高层级

		.loading-spinner {
			width: 50px;
			height: 50px;
			border: 4px solid rgba(0, 0, 0, 0.1); // 浅色圆圈
			border-left-color: $primary-color; // 活动部分颜色
			border-radius: 50%;
			animation: spin 1s linear infinite; // 旋转动画
		}
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
</style>